/* SmarTest Studio - UI控件树查看器样式 */

/* UI查看器容器 */
.ui-viewer-container {
    height: 100%;
    overflow-y: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

/* 加载状态 */
.ui-viewer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: #6c757d;
}

.ui-viewer-loading .loading-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ui-viewer-loading .spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 错误状态 */
.ui-viewer-error {
    padding: 16px;
}

.ui-viewer-error .alert {
    margin: 0;
    border-radius: 6px;
    padding: 12px 16px;
    border: 1px solid #f5c6cb;
    background-color: #f8d7da;
    color: #721c24;
}

/* 警告状态 */
.ui-viewer-warning {
    padding: 16px;
}

.ui-viewer-warning .alert {
    margin: 0;
    border-radius: 6px;
    padding: 12px 16px;
    border: 1px solid #ffeaa7;
    background-color: #fff3cd;
    color: #856404;
}

/* 空状态 */
.ui-viewer-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #6c757d;
}

/* 树节点样式 */
.ui-viewer-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ui-viewer-container li {
    margin: 0;
    padding: 0;
}

.tree-node {
    position: relative;
    user-select: none;
}

.tree-node-content {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    gap: 6px;
}

.tree-node-content:hover {
    background-color: #f8f9fa;
}

.tree-node.highlighted .tree-node-content {
    background-color: #e3f2fd;
    border: 1px solid #2196f3;
}

.tree-node.search-match .tree-node-content {
    background-color: #fff3e0;
    border: 1px solid #ff9800;
}

.tree-node.search-highlight .tree-node-content {
    background-color: #ffeb3b;
    border: 1px solid #fbc02d;
}

/* 折叠/展开控制 */
.tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.15s ease;
    margin-right: 4px;
}

.tree-toggle:hover {
    background-color: #e9ecef;
}

.tree-toggle i {
    font-size: 12px;
    color: #6c757d;
}

.tree-toggle-placeholder {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

/* 子节点容器 */
.tree-children {
    margin-left: 20px;
    border-left: 1px solid #e9ecef;
    padding-left: 8px;
    transition: all 0.2s ease;
}

.tree-children.collapsed {
    display: none;
}

/* 节点图标 */
.tree-node-content i {
    font-size: 14px;
    color: #495057;
    flex-shrink: 0;
}

/* 节点文本 */
.tree-node-text {
    flex: 1;
    color: #212529;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 节点ID */
.tree-node-id {
    font-size: 12px;
    color: #6c757d;
    font-family: 'Courier New', monospace;
    margin-left: 8px;
    flex-shrink: 0;
}

/* 节点类名 */
.tree-node-class {
    font-size: 11px;
    color: #868e96;
    font-family: 'Courier New', monospace;
    margin-left: 4px;
    flex-shrink: 0;
}

/* 不同层级的缩进 */
.tree-node[data-level="0"] {
    margin-left: 0;
}

.tree-node[data-level="1"] {
    margin-left: 16px;
}

.tree-node[data-level="2"] {
    margin-left: 32px;
}

.tree-node[data-level="3"] {
    margin-left: 48px;
}

.tree-node[data-level="4"] {
    margin-left: 64px;
}

.tree-node[data-level="5"] {
    margin-left: 80px;
}

/* 不同节点类型的图标颜色 */
.tree-node[data-type="window"] .tree-node-content i {
    color: #2196f3;
}

.tree-node[data-type="view"] .tree-node-content i,
.tree-node[data-type="viewgroup"] .tree-node-content i {
    color: #4caf50;
}

.tree-node[data-type="button"] .tree-node-content i {
    color: #ff9800;
}

.tree-node[data-type="text"] .tree-node-content i,
.tree-node[data-type="textview"] .tree-node-content i {
    color: #9c27b0;
}

.tree-node[data-type="input"] .tree-node-content i,
.tree-node[data-type="edittext"] .tree-node-content i {
    color: #607d8b;
}

.tree-node[data-type="image"] .tree-node-content i,
.tree-node[data-type="imageview"] .tree-node-content i {
    color: #e91e63;
}

.tree-node[data-type="list"] .tree-node-content i,
.tree-node[data-type="listview"] .tree-node-content i,
.tree-node[data-type="recyclerview"] .tree-node-content i {
    color: #795548;
}

.tree-node[data-type="layout"] .tree-node-content i,
.tree-node[data-type="container"] .tree-node-content i {
    color: #3f51b5;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .ui-viewer-container {
        font-size: 13px;
    }
    
    .tree-node-content {
        padding: 6px 4px;
        gap: 4px;
    }
    
    .tree-children {
        margin-left: 16px;
        padding-left: 6px;
    }
    
    .tree-node-id,
    .tree-node-class {
        display: none;
    }
}

/* 滚动条样式 */
.ui-viewer-container::-webkit-scrollbar {
    width: 8px;
}

.ui-viewer-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.ui-viewer-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.ui-viewer-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 焦点状态 */
.tree-node-content:focus {
    outline: 2px solid #2196f3;
    outline-offset: -2px;
}

/* 动画效果 */
.tree-node {
    transition: all 0.2s ease;
}

.tree-node-content {
    transition: all 0.15s ease;
}

/* 打印样式 */
@media print {
    .ui-viewer-container {
        font-size: 12px;
        color: black;
    }
    
    .tree-node-content:hover,
    .tree-node.highlighted .tree-node-content {
        background-color: transparent;
        border: none;
    }
    
    .tree-toggle {
        display: none;
    }
    
    .tree-children.collapsed {
        display: block;
    }
}